<template>
  <div class="app-container" v-table-height="{callback: height => cardHeight = height}" :style="{height: cardHeight + 'px'}">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="系统消息" name="System">
          <System v-if="activeTab === 'System'"  />
        </el-tab-pane>
        <el-tab-pane label="待办事项" name="Todo">
          <Todo v-if="activeTab === 'Todo'"  />
        </el-tab-pane>
        <el-tab-pane label="预警提醒" name="Warn">
          <Warn v-if="activeTab === 'Warn'"  />
        </el-tab-pane>
      </el-tabs>
  </div>
</template>

<script>
import System from "./system";
import Todo from "./todo";
import Warn from "./warn";

export default {
  name: "message",
  components: { System, Todo, Warn },
  data() {
    return {
      activeTab: 'System',
      cardHeight: 0
    };
  },
  created() {
  },
  methods: {
  }
};
</script>
